﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JSCP Example 1 - Table Rendering</title>
    <style type="text/css">
        table.grid 
        {
            border-collapse: collapse;
        }
        table.grid td {
            border: 1px solid black;
            padding: 5px;
        }
    </style>
    <link rel="Stylesheet" type="text/css" href="../JSClientPages.css" />    
    <link rel="Stylesheet" type="text/css" href="Stylesheet.css" />    
    <script type="text/javascript" src="../JSClientPages.js"></script>
    <script type="text/javascript" src="../JSClientPage.ashx?page1=Examples/Example1.xml"></script>

    <script type="text/javascript">
        function generateTable() {
            var parameters =
            {
                rows: document.getElementById('input-rows').value,
                columns: document.getElementById('input-columns').value
            };

            if (!parameters.rows.match(/^[0-9]+$/) || parameters.columns == 0) {
                alert('Wrong number of rows');
            }
            else if (!parameters.columns.match(/^[0-9]+$/) || parameters.columns == 0) {
                alert('Wrong number of columns');
            }
            else if (parameters.rows > 20) {
                alert('Too many rows!');
            }
            else if (parameters.columns > 20) {
                alert('Too many columns!');
            } else {
                JSClientPage.refresh
                (
                    'sample',
                    'target',
                    parameters
                );
            }
        }    
    </script>

</head>
<body>
    <div class="content">
        <div class="header">
            <span class="technology">JavaScript Client Pages</span>
            <span class="title">Programming Examples</span>
        </div>
        <div class="main">
            <h1>Programming Examples</h1>
            <h2>Example 1: Table Generation</h2>
            <p>
              Welcome to JSCP. You can now create compiled client-side
              pages.
            </p>
                
            <p>
                Let's create a table
            </p>
            <table class="form">
                <tbody>
                    <tr>
                        <th>
                            Number of Rows
                        </th>
                        <td>
                            <input id="input-rows" type="text" value="5" />
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Number of Columns
                        </th>
                        <td>
                            <input id="input-columns" type="text" value="6" />
                        </td>
                    </tr>
                </tbody>
                <tfoot class="buttons">
                    <tr>
                        <td colspan="2">
                            <button onclick="generateTable(); return false;">
                                Generate!</button>                    
                        </td>
                    </tr>
                </tfoot>
            </table>
            <div id="target">
            </div>
        </div>
    </div>
</body>
</html>
